<template>
  <div id="share-table-box" class="share-table-box">
     <div id="remove" class="buttom" @click="fullFun" v-if="showFullBtn">
      </div>
    <div class="btn-box">
      <div class="download" @click="downLoadFile"><i class="download-icon"></i>导出</div>
      <div v-if="type == 'target'">
        <Select v-model="year" @on-change="yearchange" style="width:200px">
          <Option v-for="item in optionsList || []" :value="item.value" :key="item.value">{{ item.text }}</Option>
        </Select>

      </div>
 
    </div>
    <shareTable v-if="showTable" :columns="headerData" :height="tableHeight" :tableData="tableData" @cellClick="tableCellClick"></shareTable>
  </div>
</template>

<script>
import shareTable from '@/components/shareTable'
import coverApi from '@/api/cover.js'
let optionsList = [
  {text: '2021', value: '2021'},
  {text: '2022', value: '2022'},
  {text: '2023', value: '2023'},
  {text: '2024', value: '2024'},
  {text: '2025', value: '2025'}
]
let typeApi = {
  status: 'getrptDgcalHrhxStatusListRpt',
  target: 'getrptDgcalHrhxListRpt',
  rate: 'getrptDgCalListRpt'
}
export default {
  name: 'pageTable',
  components: { shareTable },
  props: {
    type: {
      type: String,
      default: ''
    },
    trgNode: {
      type: String,
      default: ''
    },
    showFullBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showTable: false,
      headerData: [],
      tableHeight: 0,
      tableData: [],
      year: '2025'
    }
  },
  created() {
    this.optionsList = optionsList
  },
  mounted() {
    this.tableHeight = document.getElementById('share-table-box').clientHeight - 50
    window.onresize = () => {
      return (() => {
        this.tableHeight = document.getElementById('share-table-box').clientHeight - 50
      })()
    }
    if (this.showFullBtn) {
      let parentBox = document.querySelector('.share-table-box')
      parentBox.addEventListener('mouseenter', (e) => {
        if (this.isFullScreen()) {
          document.querySelector('#remove').style.display = 'none'
        } else {
          this.isFull = false
          document.querySelector('#remove').style.display = 'block'
        }
      })
      parentBox.addEventListener('mouseleave', (e) => {
        document.querySelector('#remove').style.display = 'none'
      })
    }

    this.getTableInfo()
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    url(type, pathname) {
      return window.RPConfig[type] + pathname;
    },
    downLoadFile() {
      if (this.type == 'rate') {
        // 数字化覆盖率计算表
        coverApi.downLoadFun({url: this.url('itShare', `/rptDgCal/listExport?trg_node=${this.trgNode}`)})
      } else if (this.type == 'status') {
        // 2022年数字化覆盖现状
        coverApi.downLoadFun({url: this.url('itShare', `/rptDgcalHrhxStatus/listExport?trg_node=${this.trgNode}`)})
      } else if (this.type == 'target') {
        // “十四五”数字化覆盖目标
        coverApi.downLoadFun({url: this.url('itShare', `/rptDgcalHrhx/listExport?trg_node=${this.trgNode}&report_cycle=${this.year}`)})
      }
    },
     isFullScreen() {
      return document.fullscreenElement || document.msFullcreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false
    },
    columnFixed(data, baseData) {
      let isFixed = !!data && !!data.find(item => item.fixed)
      if (isFixed) {
        baseData.fixed = true
      } else {
        data && data.forEach(child => {
          this.columnFixed(child.children, baseData)
        });
      }
    },
    getTableInfo() {
      this.showTable = false
      let params = {trgNode:this.trgNode}
      if (this.type == 'target') {
        params.reportCycle = this.year
      }
      coverApi[typeApi[this.type]](params).then(res => {
        this.headerData = res.data.data.tableColumn
        this.headerData.forEach(item => {
          this.columnFixed(item.children, item)

        })
        this.tableData = res.data.data.tableData
        this.showTable = true
      })
    },
    fullFun() {
      document.querySelector('#remove').style.display = 'none'
      this.isFull = true
      let iframe = document.getElementsByClassName('share-table-box')[0]
      let requestMethod = iframe.requestFullScreen || iframe.webkitRequestFullScreen || iframe.mozRequestFullScreen
      if (requestMethod) {
        requestMethod.call(iframe)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        var wscript = new window.ActiveXObject('WScript.Shell')
        if (wscript !== null) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    tableCellClick() {

    },
    yearchange() {
      this.getTableInfo()
    }
  },
}
</script>

<style lang="less" scoped>
#share-table-box {
  height: calc(100% - 10px);
  position: relative;
  background: #fff;
}
.download {
  display: flex;
  align-items: center;
  cursor: pointer;
  .download-icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../../asset/images/download.png);
    margin-right: 5px;
  }
}

.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.legend-icon {
  font-size: 24px;
  margin-right: 10px;
  margin-top: 13px;
}
</style>
